<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="600" :mask-closable="false">
      <Form ref="projectForm" :model="data" :label-width="100" :rules="projectFormValidate">
        <FormItem label="项目名称" prop="project_id" >
          <Select v-model="data.project_id" clearable filterable style="width: 400px">
            <Option v-for="item in projectNameList" :value="item.id" :key="item.id">
              {{ item.project_name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="派工单编号" prop="dispatch_code">
          <Input v-model="data.dispatch_code" placeholder="格式为：yyyy-mm-dd-x" />
        </FormItem>
        <FormItem label="工作单位" prop="dispatch_unit" >
          <Input v-model="data.dispatch_unit" />
        </FormItem>
        <FormItem label="工作班成员" prop="dispatch_men" >
          <Input v-model="data.dispatch_men" />
        </FormItem>
        <FormItem label="工作人数" prop="dispatch_men_sum" >
          <InputNumber v-model="data.dispatch_men_sum" />
        </FormItem>
        <FormItem label="工作内容" prop="dispatch_mission" >
          <Input v-model="data.dispatch_mission" />
        </FormItem>
        <FormItem label="工作时间" prop="apply_date" >
          <DatePicker :value="data.apply_date" type="datetimerange" format="yyyy-MM-dd HH:mm"
                      placeholder="请选择工作起止时间"
                      @on-change="setApplyDate"
                      style="width: 440px"></DatePicker>
        </FormItem>
        <FormItem label="派工人" prop="dispatch_leader" >
          <Input v-model="data.dispatch_leader" />
        </FormItem>
        <FormItem label="备注" prop="dispatch_demo" >
          <Input v-model="data.dispatch_demo" />
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getProjectName, insertDispatch, updateDispatch } from '@/api/work';
export default {
  name: 'add-edit-project',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    type: {
      /**
       * '2': 编辑项目
       * '1': 添加项目
       */
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      visible: this.value,
      title: "添加项目",
      height: 540,
      submitLoading: false,
      projectNameList: [],
      projectFormValidate: {
        dispatch_code: [
          {required: true, message: "派工单编号不能为空", trigger: "blur"}
        ],
        dispatch_unit: [
          {required: true, message: "工作单位不能为空", trigger: "blur"},
        ],
        dispatch_mission: [
          {required: true, message: "工作内容不能为空", trigger: "blur"}
        ],
        dispatch_men: [
          {required: true, message: "工作班成员不能为空", trigger: "blur"}
        ],
        dispatch_leader: [
          {required: true, message: "派工人不能为空", trigger: "blur"}
        ],
      },
    }
  },
  methods: {
    getProjects() {
      getProjectName().then(res => {
        if (res.code === 0) {
          this.projectNameList = res.data.raws;
        }
      })
    },
    init() {
      switch(this.type) {
        case '1':
          this.title = '新增派工单';
          break;
        case '2':
          this.title = '编辑派工单';
          break;
      }
    },
    handleCancel() {
      this.visible = false;
    },
    submit() {
      switch(this.type) {
        case '1':   // 新增
          this.$refs.projectForm.validate(valid => {
            if (valid) {
              this.submitLoading = true;
              insertDispatch(this.data).then(res => {
                this.submitLoading = false;
                if (res.code === 0) {
                  this.$Message.success(res.message);
                  this.$emit("on-submit", true);
                  this.visible = false;
                } else {
                  this.$Message.error(res.message);
                  return;
                }
              })
            }
          });
          break;
        case '2':   // 修改
          this.$refs.projectForm.validate(valid => {
            if (valid) {
              this.submitLoading = true;
              updateDispatch(this.data).then(res => {
                this.submitLoading = false;
                if (res.code === 0) {
                  this.$Message.success(res.message);
                }
                this.$emit("on-submit", true);
                this.visible = false;
              })
            }
          });    
          break;
      }
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    setApplyDate(v) {
      this.data.dispatch_start = v[0];
      this.data.dispatch_end = v[1];
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
    this.getProjects();
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>